<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>ACE</title>
	<style type="text/css" media="screen">
		#code {
			margin: 0;
			position: absolute;
			top: 0px;
			bottom: 20px;
			left: 0;
			right: 0;
		}

		.ace_replace_form {
			display: block !important;
		}

		#status {
			position: absolute;
			bottom: 0;
			height: 20px;
			left: 0;
			width: 100%;
			line-height: 20px;
			font-size: 12px;
			font-family: "Microsoft YaHei", "微软雅黑", tahoma, Verdana, Arial,
				sans-serif, arial, STHeiti, 宋体;
			line-height: 20px;
			overflow: hidden;
			background-color: #111;
		}

		.light #status a {
			color: #333;
		}

		.light #status a:hover {
			color: #08c;
		}

		#status a {
			color: #f1f1f1;
			text-decoration: none;
			margin-left: 10px;
		}

		#status a:hover {
			color: red;
		}

		body {
			overflow: hidden;
		}

		::-webkit-scrollbar {
			width: 6px;
			height: 8px;
		}

		::-webkit-scrollbar-track {
			background-color: #000000;
		}

		/* 滚动条的滑轨背景颜色 */
		::-webkit-scrollbar-thumb {
			background-color: rgba(77, 77, 77, 0.4);
		}

		/* 滑块颜色 */
		::-webkit-scrollbar-button {
			background-color: red;
		}

		/* 滑轨两头的监听按钮颜色 */
		::-webkit-scrollbar-corner {
			background-color: rgba(77, 77, 77, 0.4);
		}

		/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
	</style>
</head>

<body>
	<pre id="code"></pre>
	<div id='status'>
		<a href="javascript:beautify_code()" title="(Cmd+Shift+F)">格式化代码</a> <a id='check_sql'
			href="javascript: checkSQL()">检查SQL语法</a> <span style='float: right'> <a>字号</a> <select id='fontsize' size=1
				onchange="change_font_size(this)">
				<option value='12px'>12px</option>
				<option value='13px'>13px</option>
				<option value='14px'>14px</option>
				<option value='15px'>15px</option>
				<option value='16px'>16px</option>
				<option value='17px'>17px</option>
				<option value='18px'>18px</option>
				<option value='19px'>19px</option>
				<option value='20px'>20px</option>
			</select> <a>Theme:</a> <select id="theme" size="1" onchange="change_code_theme(this)">
				<optgroup label="Bright">
					<option value="ace/theme/chrome">Chrome</option>
					<option value="ace/theme/clouds">Clouds</option>
					<option value="ace/theme/crimson_editor">Crimson Editor</option>
					<option value="ace/theme/dawn">Dawn</option>
					<option value="ace/theme/dreamweaver">Dreamweaver</option>
					<option value="ace/theme/eclipse">Eclipse</option>
					<option value="ace/theme/github">GitHub</option>
					<option value="ace/theme/iplastic">IPlastic</option>
					<option value="ace/theme/solarized_light">Solarized Light</option>
					<option value="ace/theme/textmate">TextMate</option>
					<option value="ace/theme/tomorrow">Tomorrow</option>
					<option value="ace/theme/xcode">XCode</option>
					<option value="ace/theme/kuroir">Kuroir</option>
					<option value="ace/theme/katzenmilch">KatzenMilch</option>
					<option value="ace/theme/sqlserver">SQL Server</option>
				</optgroup>
				<optgroup label="Dark">
					<option value="ace/theme/ambiance">Ambiance</option>
					<option value="ace/theme/chaos">Chaos</option>
					<option value="ace/theme/clouds_midnight">Clouds Midnight</option>
					<option value="ace/theme/cobalt" selected>Cobalt</option>
					<option value="ace/theme/gruvbox">Gruvbox</option>
					<option value="ace/theme/idle_fingers">idle Fingers</option>
					<option value="ace/theme/kr_theme">krTheme</option>
					<option value="ace/theme/merbivore">Merbivore</option>
					<option value="ace/theme/merbivore_soft">Merbivore Soft</option>
					<option value="ace/theme/mono_industrial">Mono Industrial</option>
					<option value="ace/theme/monokai">Monokai</option>
					<option value="ace/theme/pastel_on_dark">Pastel on dark</option>
					<option value="ace/theme/solarized_dark">Solarized Dark</option>
					<option value="ace/theme/terminal">Terminal</option>
					<option value="ace/theme/tomorrow_night">Tomorrow Night</option>
					<option value="ace/theme/tomorrow_night_blue">Tomorrow
						Night Blue</option>
					<option value="ace/theme/tomorrow_night_bright">Tomorrow
						Night Bright</option>
					<option value="ace/theme/tomorrow_night_eighties">Tomorrow
						Night 80s</option>
					<option value="ace/theme/twilight">Twilight</option>
					<option value="ace/theme/vibrant_ink">Vibrant Ink</option>
				</optgroup>
			</select></span>
	</div>

<script src="../../../EWA_STYLE/js/ewa.min.js" type="text/javascript"></script>
<script src="../../../third-party/ace/v1.4.12/src-min/ace.js" type="text/javascript"></script>
<script src="../../../third-party/ace/v1.4.12/src-min/ext-language_tools.js" type="text/javascript"></script>

<script src="../../../third-party/js-beautify/v1.14.11/lib/beautify.min.js" type="text/javascript"></script>
<script src="../../../third-party/js-beautify/v1.14.11/lib/beautify-css.min.js" type="text/javascript"></script>
<script src="../../../third-party/js-beautify/v1.14.11/lib/beautify-html.min.js" type="text/javascript"></script>

<script src="../../../third-party/jquery/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="../../../third-party/sql-formatter/dist/sql-formatter.min.js" type="text/javascript"></script>

<script src="../../../third-party/raphael-master/raphael.min.js" type="text/javascript"></script>
<script src="../../../third-party/flowchart.js-master/release/flowchart.min.js" type="text/javascript"></script>
<script src="../../../third-party/markdown-editor-master/markdown-it.js" type="text/javascript"></script>
<script src="../../../third-party/markdown-editor-master/highlight.pack.js" type="text/javascript"></script>
<script src="../../../third-party/markdown-editor-master/markdown-it-footnote.js" type="text/javascript"></script>


	<script type="text/javascript">
		var editor, beautify;
		var parent_textarea;
		function update() {
			if (parent_textarea) {
				parent_textarea.value = getText();
			}
		}
		function beautify_code() {
			var p = editor.getCursorPosition();
			var s;
			if (mode == 'ace/mode/javascript') {
				s = js_beautify(getText());
			} else if (mode == 'ace/mode/html' || mode == 'ace/mode/xml') {
				s = html_beautify(getText());
			} else if (mode == 'ace/mode/css') {
				s = css_beautify(getText());
			} else if (mode == 'ace/mode/sql') {
				beautify_code_sql();
				return;
			} else {
				$Tip('不支持类型格式化');
				return;
			}
			editor.setValue(s, 1);
			editor.moveCursorToPosition(p);
			editor.selection.clearSelection();
		}
function beautify_code_sql() {
 	let config = {
        "language": "tsql",
        "tabWidth": "4",
        "useTabs": false,
        "keywordCase": "upper",
        "dataTypeCase": "preserve",
        "functionCase": "preserve",
        "identifierCase": "preserve",
        "indentStyle": "standard",
        "logicalOperatorNewline": "before",
        "expressionWidth": "82",
        "lineBetweenQueries": "1",
        "denseOperators": false,
        "newlineBeforeSemicolon": false
    };
    var p = editor.getCursorPosition();
    var txt = getText();
    try {
        let formated = sqlFormatter.format(txt, config);
        editor.setValue(formated, 1);
        editor.moveCursorToPosition(p);
        editor.selection.clearSelection();
    } catch (e) {
        alert(e);
    }
}
		function style_html(s1) {
			var s = html_beautify(s1);
			return s;
		}
		function getText() {
			return editor.getValue();
		}
		function setText(t) {
			editor.setValue(editor.getValue() + t, 1);
		}
		function change_code_theme(obj) {
			editor.setTheme(obj.value);
			window.localStorage["EWA_CODE_THENE"] = obj.value;
		}
		function change_font_size(obj) {
			editor.setFontSize(obj.value);
			window.localStorage["EWA_CODE_FONTSIZE"] = obj.value;
		}
		function initEditor(code, type) {
			var iframes = window.parent.document.getElementsByTagName('iframe');
			var thisIframe = null;
			for (var i = 0; i < iframes.length; i++) {
				var o = iframes[i];
				if (o.contentWindow == window) {
					thisIframe = o;
					var textareas = o.parentNode.parentNode
						.getElementsByTagName('textarea');
					if (textareas.length > 0) {
						//存放markdown的数据
						parent_textarea = textareas[0];
					} else {
						// alert('parent textarea not found');
					}
					break;
				}
			}
			editor = null;
			var u1 = new EWA_UrlClass();
			var markType = type || u1.GetParameter("__TYPE__")
				|| window.parent.__TYPE__;
			if (!markType) {
				return;
			}
			// console.log(markType);

			var val = code;
			if (val == null) {
				var valId = u1.GetParameter("__SID__");
				if (parent_textarea) {
					val = parent_textarea.value;
				} else if (!valId) {
					val = window.parent.__VAL__;
				} else {
					var objVal = parent.document.getElementById(valId);
					if (objVal) {
						val = objVal.value;
					}
				}
			}
			// console.log(val);
			if (val == null) {
				val = "";
			}
			//console.log(markType,val);
			mode = 'ace/mode/html';
			if (document.getElementById('check_sql')) {
				document.getElementById('check_sql').style.display = 'none';
			}
			if (markType == 'sql') {
				mode = 'ace/mode/sql';
				if (document.getElementById('check_sql')) {
					document.getElementById('check_sql').style.display = '';
				}
			} else if (markType == 'jscript' || markType == 'js') {
				mode = 'ace/mode/javascript';
			} else if (markType == 'xml') {
				mode = 'ace/mode/xml';
			} else if (markType == 'css') {
				mode = 'ace/mode/css';
			}
			if (document.getElementById('code')) {
				document.body.removeChild(document.getElementById('code'));
				var pre = document.createElement('pre');
				pre.id = 'code';
				document.body.appendChild(pre);
			}

			ace.require("ace/ext/language_tools");

			editor = ace.edit("code");
			var theme_code = "ace/theme/cobalt";
			if (window.localStorage && window.localStorage["EWA_CODE_THENE"]) {
				var v = window.localStorage["EWA_CODE_THENE"];
				var obj = document.getElementById('theme');
				for (var i = 0; i < theme.options.length; i++) {
					var v1 = obj.options[i].value;
					if (v1 == v) {
						theme_code = v1;
						obj.value = v1;
						break;
					}
				}
			}
			editor.setTheme(theme_code);

			// 设置字体大小
			if (window.localStorage && window.localStorage["EWA_CODE_FONTSIZE"]) {
				var v = window.localStorage["EWA_CODE_FONTSIZE"];
				var selectFontsize = document.getElementById('fontsize');
				if (v) {
					selectFontsize.value = v;
					editor.setFontSize(v);
				}
			}

			editor.session.setMode(mode);
			editor.getSession().setUseWrapMode(true);

			editor.setOptions({
				enableBasicAutocompletion: true,
				enableSnippets: true,
				enableLiveAutocompletion: true
			});

			editor.commands.addCommand({
				name: 'myCommand',
				bindKey: {
					win: 'Ctrl-Shift-F',
					mac: 'Command-Shift-F'
				},
				exec: function (editor) {
					beautify_code();
				},
				readOnly: true
			});
			editor.commands.addCommand({
				name: 'myCommandSave',
				bindKey: {
					win: 'Ctrl-S',
					mac: 'Command-S'
				},
				exec: function (editor) {
					try {
						parent.parent.save();
						top.saveXml();
					} catch (e) {
						console.log(e);
					}
				},
				readOnly: true
			});
			editor.setValue(val, 1);
			editor.selection.clearSelection();
			if (markType == 'xml') {
				editor.setOption('readOnly', true);
			}
			editor.getSession().on('change', function (e) {
				update();
			});
			editor.$blockScrolling = Infinity;
		}
		(function () {
			initEditor();
		})();
	</script>
</body>

</html>